<template>
	<div class="spaceWrap">
		<bheader></bheader>
		<div class="spaceBanner">
			<img src="../../assets/spaceBg.png"/>
			<div class="personCenter" v-if="isLogin">
				<div class="space_info">
					<div class="img_wrap">
						<div class="face_img">
							<img src="../../assets/noface.gif" alt="">
						</div>
					</div>
					<div class="zhanghao">
						<p>账号资料</p>
					</div>
					<div class="person_info">
						<div class="name_info">
							<p>落樱miku</p>
						</div>
						<div class="svg_wrap">
							<svg class="index__icon__src-space-info- " aria-hidden="true">
								<use xlink:href="#icon-zhongxing"></use>
							</svg>
						</div>
						<div class="exp_info">
							<div class="exp_img">
								<img src="//s1.hdslb.com/bfs/static/mult/images/lv6.png" alt="">
							</div>
							<div class="exp_tiao">
								<div class="exp_val">
									<p>cao</p>
								</div>
							</div>
						</div>
					</div>
					<div class="fans">
						<div class="fans_wrap">
							<p><span>- </span>关注</p>
							<p class="ml21"><span>- </span>粉丝</p>
						</div>
					</div>
				</div>
			</div>
			<div v-else class="loginField">
				<div class="register">
					<router-link to="/register">注册</router-link>
				</div>
				<div class="login">
					<router-link to="/login">登陆</router-link>
				</div>
			</div>
		</div>
		<div class="tabWrap">
			<div class="tabCon " :class="{active:tabIndex==1}" @click="changeTab(1)">
				<span>历史记录</span>
			</div>
			<div class="tabCon":class="{active:tabIndex==2}"  @click="changeTab(2)">
				<span>我的投稿</span>
			</div>
		</div>
		<div class="history" v-show="tabIndex==1">
			<div class="noCon">
				<img src="../../assets/noContent.png"/>
				<p>你还没有历史记录</p>
				<p>快去发现 <router-link to="/">新内容</router-link> 吧！</p>
			</div>
		</div>
		<div class="article" v-show="tabIndex==2">
			<div class="nologin">
				<img src="../../assets/login.png"/>
			</div>
			<p>你还没有登录哦~</p>
			<p>赶快登录打开新世界的大门</p>
		</div>
		<div class="footer">
			<div class="textCon">
				<p>哔哩哔哩 沪ICP备13002172号-3</p>
				<p>信息网络传播视听节目许可证：0910417</p>
			</div>
		</div>
	</div>
</template>

<script>
	import bheader from 'components/header/bheader';
	export default {
		created(){
			if(sessionStorage.getItem("isLogin")){
				this.isLogin=true
			}
		},
		watch:{
			$route(){
				if(sessionStorage.getItem("isLogin")){
					this.isLogin=true
				}
			}
		},
		data(){
			return {
				isLogin:false,
				tabIndex:1
			}
		},
		methods:{
			changeTab(index){
				index?index:1,
				this.tabIndex=index
			}
		},
		components:{
			bheader,
		}
	}
</script>

<style lang="scss" type="text/css">
	.space_info{
	    position: relative;
	    width: 100%;
	    background-color: #fff;
	    padding-bottom: 18px;
	    .img_wrap{
	    	position: absolute;
	    	z-index: 66;
	    	width: 100%;
	    }
	    .face_img{
    	    position: relative;
    	    width: 21%;
    	    overflow: hidden;
    	    top: -35px;
	    	left: 3.5%;
    	    border-radius: 50%;
    	    &::after{
    	    	content: "";
    	    	display: block;
    	    	padding-top: 100%;
    	    }
    	    img{
    	    	width: 100%;
    	    	position: absolute;
    	    	
    	    }
	    }
	    .zhanghao{
	    	width: 72px;
	    	height: 28px;
	    	position: absolute;
	    	top: 10px;
	    	right: 3.5%;
    		border:1px solid #fb7299;
    		border-radius:3px;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		p{
			    color: #fb7299;
			    font-size: 14px;
    		}
	    }
	    .person_info{
	    	margin-left: 12px;
	    	position: relative;
	    	display: flex;
	    	align-content: center;
	    	padding-top: 60px;
	    	flex-wrap: wrap;
	    	.name_info{
	    		p{
	    			color: #212121;
	    			font-size: 20px;
	    		}
	    	}
	    	.svg_wrap{
	    		width: 16px;
	    		height: 18px;
	    		margin-left:11.5px ;
	    		margin-top: 5px;
	    		svg{
    			    display: block;
				    width: 100%;
				    height: 100%;
				    fill: #ce21e8;
	    		}
	    	}
	    	.exp_info{
	    		margin-left: 6px;
	    		margin-top: 4px;
	    		display: flex;
	    		justify-content: flex-start;
	    		align-items: center;
	    		position: relative;
	    		width: 40%;
	    		.exp_img{
	    			width: 28px;
	    			height: 14px;
	    			display: flex;
	    			align-items: center;
	    			position: relative;
	    			z-index:66;
	    			img{
	    				width: 100%;
	    			}
	    		}
	    		.exp_tiao{
					background-color: red;
					border-radius: 5px;
					position: relative;
					width: 60%;
					height: 14px;
					z-index: 1;
					.exp_val{
						display: flex;
						z-index: 12;
						width: 100%;
						justify-content: flex-end;
						padding-right: 5px;
						align-content: center;
						p{
						    color: #fff;
						    font-size: 12px;
						}						
					}
	    		}
	    	}
	    }
	    .fans{
	    	margin: 12px 12px 0px;
	    	.fans_wrap{
	    		display: flex;
	    		align-items:center;
	    		p{
	    			font-size: 14px;
	    			color: #757575;
	    		}
	    		.ml21{
	    			margin-left: 21px;
	    		}
	    	}
	    }
	}

	/**/
	body{
		background-color:#f4f4f4 ;
	}
	.spaceWrap{
		padding-top: 64px;
		background: #f4f4f4;
	}
	.spaceBanner{
		width: 100%;
		position: relative;
		img{
			display: block;
			width: 100%;
		}
		.personCenter{
			/*position: absolute;*/
		}
	}
	.loginField{
		position: absolute;
		top: 53%;
		left: 25%;
		width: 50%;
		font-size: 12px;
		&:after{
			content: "";
			display: block;
			clear: both;
		}
		div[class]{
			width: 40%;
			border-radius: 8%;
			a{
				display: block;
				width: 100%;
				line-height: 25px;
				text-align: center;
			}
		}
	}
	.register{
		float: left;
		background: #fff;
		a{
			color: #fb7299;
		}
	}
	.login{
		float: right;
		background: #fb7299;
		a{
			color:#fff
		}
	}
	.tabWrap{
		width: 100%;
		border-top: 1px solid #979797;
		border-bottom: 1px solid #979797;
		padding: 8px 0;
		background: #fff;
		.tabCon{
			position: relative;
			float: left;
			width: 50%;
			text-align: center;
			font-size: 12px;
			color:#666;
		}
		&:after{
			content: "";
			display: block;
			clear: both;
		}
		.active{
			
			span{
				color: #fb7299;
				padding-bottom: 3px;
				border-bottom: 2px solid #fb7299;
			}
			
		}
	}
	.article{
		background: #fff;
		.nologin{
			position: relative;
			padding-top: 72px;
			padding-bottom:13px;
			img{
				display: block;
				width: 78%;
				margin: 0 auto 20px auto;
			}
		}
		p{
			text-align: center;
			font-size: 12px;
			color: #999;
			line-height: 17px;
		}
	}
	.noCon{
		position: relative;
		padding-top: 72px;
		text-align: center;
		font-size: 12px;
		color: #999;
		img{
			display: block;
			width: 80%;
			margin: 0 auto;
		}
		p{
			line-height: 17px;
		}
		a{
			color: #fb7299;
		}
	}
	.footer{
		padding-top: 20px;
		padding-bottom: 34px;
		font-size: 12px;
		text-align: center;
		p{
			line-height: 20px;
			color: #999;
		}
	}
</style>